/* styles.css */

/* Reset CSS */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img, a, button {
  border: none;
  outline: none;
}

/*Définition de la police personnalisée*/

@font-face {
  font-family: 'FadoRound';
  src: url('FONTS/FadoRound-Regular.otf') format('opentype');
}

@font-face {
  font-family: 'Bistouri-Wip';
  src: url('FONTS/Bistouri-wip-Regular.otf') format('opentype');
}

@font-face {
  font-family: 'CapRomaines';
  src: url('FONTS/CapRomaines-Regular.otf') format('opentype');
}




/* Corps de la page */
body {
  font-family: "neue-haas-unica", sans-serif;
  font-weight: 400;
  font-style: normal;
  padding-top: 30px;
  padding-bottom: 40px;
}




                                                                          
/* 

88                                            88                          
88                                            88                          
88                                            88                          
88,dPPYba,    ,adPPYba,  ,adPPYYba,   ,adPPYb,88   ,adPPYba,  8b,dPPYba,  
88P'    "8a  a8P_____88  ""     `Y8  a8"    `Y88  a8P_____88  88P'   "Y8  
88       88  8PP"""""""  ,adPPPPP88  8b       88  8PP"""""""  88          
88       88  "8b,   ,aa  88,    ,88  "8a,   ,d88  "8b,   ,aa  88          
88       88   `"Ybbd8"'  `"8bbdP"Y8   `"8bbdP"Y8   `"Ybbd8"'  88 */


/* ===== HEADER GLOBAL ===== */
header {
  font-family: "neue-haas-unica", sans-serif;
  position: fixed;           /* Le header reste toujours visible en haut */
  top: 0;
  width: 100%;
  z-index: 1000;
  background-color: #fff;    /* Fond blanc pour masquer le contenu derrière */
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 18px;
  padding-right: 9px;
  height: 42px;
  
}

/* ===== CONTENEUR PRINCIPAL ===== */


.header-container {
  display: flex;              /* Aligne tout sur une seule ligne */
  justify-content: flex-start; /* Espace entre la partie gauche et droite */
  align-items: center;        /* Centre verticalement tous les éléments */
  margin-bottom: 1px;
  gap: 20vw;
}

/* ===== PARTIE GAUCHE : nom + navigation ===== */

/* ===== NOM ===== */
.name {
  
  font-size: 0.9rem;
  font-weight: normal;
  white-space: nowrap;
  max-width: 14vw;
  padding-bottom: 2px;
}

.left {

  display: flex;
  align-items: center;
  gap: 30px;                  /* Espacement entre chaque lien du menu gauche */
  
}

/* ===== PARTIE DROITE : "A propos" + langues ===== */
.right {
  display: flex;                 /* aligne horizontalement A propos + langues */
  align-items: center;           /* centre verticalement */
  gap: 12px;                     /* espace entre A propos et langues */
  width: max-content;             /* largeur minimale pour contenir le contenu uniquement */
  justify-content: flex-end;      /* pousse le contenu à droite à l’intérieur de .right */


}


/* ===== SWITCH LANGUE ===== */
.lang-switch {

  display: flex;
  align-items: center;
  gap: 10px;                  /* Espacement entre EN et FR */
  border: none;               /* Retire la bordure inutile */
  margin: 0;                  /* Évite tout décalage vertical ou horizontal */
  padding: 0;
}

/* Lien de langue (EN / FR) */
.lang-option {
  
  display: flex;
  align-items: center;
  gap: 4px;                   /* Petit espace entre le rond et le texte */
  cursor: pointer;
  text-decoration: none;
  color: black;
  font-size: 0.9rem;
  text-transform: uppercase;
}

/* Rond vide */
.lang-option .circle {
  width: 12px;
  height: 12px;
  border: 1px solid black;
  border-radius: 50%;
  position: relative;
  display: inline-block;
}

/* Rond plein quand actif */
.lang-option.active .circle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* centre le rond plein */
  width: 6px;   /* taille du rond intérieur */
  height: 6px;
  background: black;
  border-radius: 50%;
}



/* ===== LIENS DU HEADER ===== */

.header-titles {
  font-size: 0.9rem;
  text-transform: uppercase;
  color: #333;
  text-decoration: none;
  letter-spacing: 0.012rem;
  
  align-items: center;

}

/* ===== LIENS GÉNÉRAUX ===== */
.link, .header-titles {
  text-decoration: none;
  color: black;
  text-transform: uppercase;
}

/* Ajoute une bordure pour visualiser la zone "A propos" */
.about {
  
  padding: 2px 4px;      /* un petit padding pour que le texte ne touche pas la bordure */
}

.header-titles_about {
  text-transform: uppercase;
  font-size: 0.9rem;
}

/* ===== ABOUT PAGE ===== */
.about-page {
  display: flex;
}



/*
                                                                                                                     
88  88               88                               88                                                             
88  ""               88                               88                                                             
88                   88                               88                                                             
88  88  8b,dPPYba,   88   ,d8   ,adPPYba,     888     88,dPPYba,    ,adPPYba,   8b       d8   ,adPPYba,  8b,dPPYba,  
88  88  88P'   `"8a  88 ,a8"    I8[    ""     888     88P'    "8a  a8"     "8a  `8b     d8'  a8P_____88  88P'   "Y8  
88  88  88       88  8888[       `"Y8ba,              88       88  8b       d8   `8b   d8'   8PP"""""""  88          
88  88  88       88  88`"Yba,   aa    ]8I     888     88       88  "8a,   ,a8"    `8b,d8'    "8b,   ,aa  88          
88  88  88       88  88   `Y8a  `"YbbdP"'     888     88       88   `"YbbdP"'       "8"       `"Ybbd8"'  88
*/





/* Styles de base pour tous les liens */
.link, .home-link, .header-titles {
    text-decoration: none;
    /* Supprime le soulignement des liens */
    
    
    font-family: sans-serif;
    /* Police de base des liens */
}

/* Style au survol */
.link:hover, .home-link:hover, .name:hover, .about:hover, .header-titles:hover, .header-titles_about:hover {
    font-style: italic;
    /* Rend le texte en italique */
}

.friends-link {
color: darkgrey;
text-decoration: none;

}

/*
                                                          
88                                                        
88                                                        
88                                                        
88,dPPYba,    ,adPPYba,   88,dPYba,,adPYba,    ,adPPYba,  
88P'    "8a  a8"     "8a  88P'   "88"    "8a  a8P_____88  
88       88  8b       d8  88      88      88  8PP"""""""  
88       88  "8a,   ,a8"  88      88      88  "8b,   ,aa  
88       88   `"YbbdP"'   88      88      88   `"Ybbd8"'*/


/* Texte d'accueil */
.welcome-text {

    font-size: 1.1rem;
    width: 90%; /* Augmente la largeur pour qu'elle prenne presque tout l'écran sur mobile */
    max-width: 600px; /* Limite la largeur sur les écrans plus grands */
    text-align: center; /* Centre le texte horizontalement */
    margin: 3vh auto 7vh; /* Centre verticalement et ajoute un espace en bas */
    padding: 0 10px; /* Ajoute un petit padding interne pour éviter que le texte colle aux bords */
    line-height: 1.5; /* Améliore la lisibilité en augmentant l'interlignage */
    text-transform: uppercase;
}

/* Flèche dans le texte */
.arrow-welcome-text {
    width: 22px;
    margin-right: 8px;
    padding-top: 2px;
    vertical-align: middle; /* Assure l'alignement vertical avec le texte */
    padding-bottom: 6px;
}

/* Conteneur du GIF */
.gif-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Prend toute la largeur de l'écran */
    height: auto; /* S'ajuste à la hauteur naturelle du GIF */
    margin: 10vh 0 4vh; /* Ajoute un espace au-dessus et en dessous */
}

/* Style pour le GIF */
.centered-gif {
    max-width: 85%; /* Le GIF ne dépasse jamais la largeur de l'écran */
    max-height: 85%; /* Le GIF ne dépasse jamais la hauteur de son conteneur */
    object-fit: contain; /* Garde les proportions du GIF */
    display: block; /* S'assure que l'image est un élément de bloc */
    margin: 0 auto; /* Centre horizontalement l'image */
}
 


  
/*


                                                     
   ad88                                              
  d8"                              ,d                
  88                               88                
MM88MMM  ,adPPYba,   8b,dPPYba,  MM88MMM  ,adPPYba,  
  88    a8"     "8a  88P'   `"8a   88     I8[    ""  
  88    8b       d8  88       88   88      `"Y8ba,   
  88    "8a,   ,a8"  88       88   88,    aa    ]8I  
  88     `"YbbdP"'   88       88   "Y888  `"YbbdP"'
*/




.font-tester-container {
  
  font-family: "neue-haas-unica", sans-serif;
  max-width: 100vw;
  margin-top: 20px;
  margin-right: 20px;
  margin-left: 18px;
}

.font-info-row {

  font-family: "neue-haas-unica", sans-serif;
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 3fr 2fr 2fr;
  align-items: flex-start;
  margin-bottom: 10px;
  align-content: center;
  padding-top: 5px;
  border-top: 1px solid black;
  font-size: 0.9rem;
  line-height: 1.1rem;
}



.font-name, .font-glyphs {
  
  text-transform: uppercase;
  padding-top: 6px;

}

.font-description {
    
    margin-right: 30px;
    padding-top: 6px;
    
}



/*longuer de la ligne de curseur*/
.control input[type="range"] {
  width: 160px;
  position: relative;
  bottom: 4px; /* ajuste finement selon ton rendu, 1 à 3px max */
}

/*boîtes abritant les curseurs*/
.control {

display: flex;
align-items: center;
margin: 0 auto;
display: block;
text-transform: uppercase;
padding-top: 6px;

}

::selection {
  background-color: #bbc7c9s; /* Couleur de fond du surlignement */
  color: white; /* Couleur du texte sélectionné */
}


/* explication : chaque type à tester à une class "editable" à son nom 
(ex: "editable-olivier") dans le html, et il faut copier coller ce code : 


.editable-olivier {
    font-family: "olivier", sans-serif;
    width: 80%;
  margin: 0 auto;
  display: block;
  min-height: 100px;
  height: auto;
  font-size: 32px;
  text-align: center;
  line-height: 1.4;
  border: none;
  background: none;
  padding: 20px 0;
  outline: none;
  resize: vertical;
  padding-bottom: 4vh;
  color: #ff3f0f;
}

... à la suite des précédents .editable dans le css
pour avoir les bons paramètres, en changeant évidemment la "font-family" et y 
mettre la typpo correspondante à la class 
 */


.editable-fadoround {
  font-family: "FadoRound-Regular", sans-serif;
  width: 80%;
  text-transform: uppercase;
  margin: 0 auto;
  display: block;
  min-height: 100px;
  height: auto;
  font-size: 62px;
  text-align: center;
  line-height: 1;
  border: none;
  background: none;
  padding: 20px 0;
  outline: none;
  resize: vertical;
  padding-bottom: 4vh;
  color: #bbc7c9;
}

.editable-fadosans {
    font-family: "FadoSans-Regular", sans-serif;
    width: 80%;
    text-transform: uppercase;
  margin: 0 auto;
  display: block;
  min-height: 100px;
  height: auto;
  font-size: 62px;
  text-align: center;
  line-height: 1;
  border: none;
  background: none;
  padding: 20px 0;
  outline: none;
  resize: vertical;
  padding-bottom: 4vh;
  color: #bbc7c9;;
}


.editable-bistouri{
  width: 80%;
  margin: 0 auto;
  display: block;
  min-height: 100px;
  height: auto;
  font-size: 42px;
  text-align: center;
  line-height: 1.4;
  border: none;
  background: none;
  padding: 20px 0;
  outline: none;
  resize: vertical;
  font-family: "Bistouri-wip-Regular", sans-serif;
  padding-bottom: 4vh;
  color: #4fa459;
}


.editable-caprom{
    font-family: "CapRomaines", sans-serif;
    width: 80%;
  width: 80%;
  margin: 0 auto;
  text-transform: uppercase;
  display: block;
  min-height: 100px;
  height: auto;
  font-size: 42px;
  text-align: center;
  line-height: 1.4;
  border: none;
  background: none;
  padding: 20px 0;
  outline: none;
  resize: vertical;
  padding-bottom: 4vh;
  color: #4fa459;
}


/* Style des curseurs */
input[type="range"] {
  -webkit-appearance: none; /* Supprime le style par défaut */
  width: 150px;
  height: 2px;
  background: #c3ced5;
  border-radius: 1px;
  outline: none;
  cursor: pointer;
}

/* La ligne (track) */
input[type="range"]::-webkit-slider-runnable-track {
  height: 1px;
  background: black;
}

/* Le petit rond (thumb) */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  background: black;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  margin-top: -4px; /* Pour centrer le rond */
  transition: background 0.2s ease;
}

/* Changer la couleur du rond au hover */
input[type="range"]:hover::-webkit-slider-thumb {
  background: grey;
}

/* Firefox */
input[type="range"]::-moz-range-track {
  height: 2px;
  background: #c3ced5;
}

input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: #c3ced5;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease;
}

input[type="range"]:hover::-moz-range-thumb {
  background: grey;
}

/* message responsive pour la page fonts */
.font-mobile-warning {
  display: none;       /* caché par défaut */
  text-align: center;
  padding: 2rem;
  font-size: 1rem;
  font-weight: 500;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  margin: 2rem;
}








/*
                                                        
                                             88         
                                             88         
                                             88         
8b      db      d8   ,adPPYba,   8b,dPPYba,  88   ,d8   
`8b    d88b    d8'  a8"     "8a  88P'   "Y8  88 ,a8"    
 `8b  d8'`8b  d8'   8b       d8  88          8888[      
  `8bd8'  `8bd8'    "8a,   ,a8"  88          88`"Yba,   
    YP      YP       `"YbbdP"'   88          88   `Y8a*/


.work-grid {
  display: grid;
  grid-template-columns: 2.5fr 2fr  3fr 3fr 3fr; /* 5 colonnes, avec ≠ unités chacunes: 2,5 unités pour la prelière, 2 pour la deuxième, etc */
  height: 100vh;
  overflow: hidden;
}

.work-text {
  position: sticky;
  top: 0;
  align-self: start;
  padding: 10px;
  padding-left: 16px;
  padding-top: 40px;
  height: fit-content;
  font-size: 0.9rem;
  text-transform: uppercase;
  line-height: 1.3;

}

.work-projects {

  grid-column: 3 / 6; /* occupe les 3 dernières colonnes */
  height: 100vh;
  overflow-y: scroll;
  padding-top: 14px;
  padding-left: 15px;
  padding-right: 18px;
  padding-top: 50px;
  box-sizing: border-box;
  
}

.project {
  margin-bottom: 4rem;
  color: black;
}

.project img {
  width: 100%;
  height: auto;
  display: block;
}


.project h3 {
font-size: 1.2rem;
text-transform: uppercase;
margin-top: 0.5rem;
font-weight: normal;
text-decoration: none;


}

.project-title {
    text-decoration: none;
    color: black;

}

a {
  text-decoration: none;
  color: black;
}



.project-subtitle {
  
    text-transform: uppercase;
    text-align: right;
    font-size: 1.2rem;
    margin-bottom: 2rem;
    color: black;
   

}

.subtitle-line {
  display: grid;
  grid-template-columns: 1fr 1fr ; /* deux colonnes égales */
  align-items: center;
  
  height: 50px; /* hauteur de la boîte = pour modifier l'espacement vertical entre chaque projet */
}


/* colonne abritant la flèche à gauche */
.arrow-column {
    width: 3vw;
    
    margin-bottom: 2rem;
    
   
}

/* colonne abritant le texte à droite*/
.text-column {
    width: 40vw;
}

::selection {
  background-color: #bbc7c9; /* Couleur de fond du surlignement */
  color: white; /* Couleur du texte sélectionné */
}




/* EFFET CHANGEMENT DE LANGUE */


/*
.lang-switch {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 40px;
  line-height: 0.1rem;
  font-style: italic;
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: black;
}

.circle {
  width: 14px;
  height: 14px;
  border: 1px solid black;
  border-radius: 50%;
  position: relative;
}

.english .lang-option.english .circle::before,
.french .lang-option.french .circle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: black;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

*/






  
/*                                                                                 
88                                                                               
88                            ,d                               ,d                
88                            88                               88                
88  8b,dPPYba,   ,adPPYba,  MM88MMM  ,adPPYYba,  8b,dPPYba,  MM88MMM  ,adPPYba,  
88  88P'   `"8a  I8[    ""    88     ""     `Y8  88P'   `"8a   88     I8[    ""  
88  88       88   `"Y8ba,     88     ,adPPPPP88  88       88   88      `"Y8ba,   
88  88       88  aa    ]8I    88,    88,    ,88  88       88   88,    aa    ]8I  
88  88       88  `"YbbdP"'    "Y888  `"8bbdP"Y8  88       88   "Y888  `"YbbdP"'*/



./* Wrapper global */
.wrapper {
    width: 100vw;
    height: 100vh;
    display: flex;
    gap: 1rem;
    overflow: hidden;
}

/* Carrousel au centre */
.Projects_carousel {
    flex: 3; /* Carrousel prend 3 unités de largeur */
    height: calc(100vh - 22vh); /* Ajuste la hauteur si besoin */
    display: flex;
    gap: 8px;
    align-items: center;
    scroll-snap-type: x mandatory;
    overflow-x: auto; /* Activer défilement horizontal */
    overflow-y: hidden; /* Désactiver défilement vertical */
    scroll-behavior: smooth;
    white-space: nowrap;
}

/* Images du carrousel */
.Projects_carousel img {
    height: 100%; /* Toutes les images prennent 100% de la hauteur du carrousel */
    width: auto; /* Maintenir les proportions des images */
    object-fit: cover; /* Ajuste l'image pour qu'elle remplisse l'espace sans déformation */
    scroll-snap-align: start;
}


/* Vidéo intégrée dans le carrousel */
.video-wrapper {
    width: 75%; /* Même largeur que les images */
    height: 100%; /* Même hauteur que les images */
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: start; /* Aligner comme les images */
    overflow: hidden; /* Assurez-vous que rien ne dépasse */
}

.video-wrapper video {
    width: 100%; /* La vidéo remplit horizontalement l'espace */
    height: 100%; /* La vidéo remplit verticalement l'espace */
    object-fit: cover; /* Assure que la vidéo remplit sans déformer */
    border: none; /* Supprime les bordures par défaut */
}



/* Suppression de la scrollbar */
.Projects_carousel::-webkit-scrollbar {
    display: none;
}


.columns {
    display: flex;
    
    justify-content: space-between;
    display: flex;
    padding: 10px;

}

.left1 {
    width: 12%;
    
    list-style: none;
    font-size: 1rem;
    text-transform: uppercase;
    margin-right: 15px;
    letter-spacing: 0.020rem;
    line-height: 1.1;
    margin-left: 12px;
}

.left2 {
    width: 45%;
    
    list-style: none;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.020rem;
    line-height: 1.1;

}

 .right {
    width: 70%;
    max-height: 60vh;
    
    list-style: none;
    letter-spacing: 0.020rem;
    margin-right: 8px;
}


p.description {
    font-size: 1rem;
    line-height: 1.5;
    width: 100%;
    min-height: 11vh;
    max-height: 30vh;
    
    text-align: left;
    font-size: 1rem;
    padding-bottom: 0.rem;
    line-height: 1.2;
}

.souligner {
    text-decoration: underline;
    text-underline-offset: 2px; /* Distance entre le texte et le soulignement */
}






/*    
    
}        88                                       ,d        
            88                                       88        
,adPPYYba,  88,dPPYba,    ,adPPYba,   88       88  MM88MMM     
""     `Y8  88P'    "8a  a8"     "8a  88       88    88        
,adPPPPP88  88       d8  8b       d8  88       88    88        
88,    ,88  88b,   ,a8"  "8a,   ,a8"  "8a,   ,a88    88,       
`"8bbdP"Y8  8Y"Ybbd8"'    `"YbbdP"'    `"YbbdP'Y8    "Y888 */

/* ABOUT PAGE */

/* Conteneur principal */
.about-container {
    display: flex;
    flex-direction: column; /* Arrange les éléments en colonne */
    align-items: center; /* Centre horizontalement les enfants */
    justify-content: center; /* Centre verticalement les enfants */
    padding: 20px; /* Ajoute un peu d'espacement autour */
    text-align: center; /* Optionnel : centre tout le contenu textuel */
}


/* Photo d'identité */
.about-photo {
    display: block; /* Permet de manipuler les marges correctement */
    margin: 0 auto; /* Centre l'image horizontalement */
    margin-top: 4vh;
    width: 14vw;
    min-width: 12vw;
    height: auto; /* Maintient le ratio de l'image */
}


/* Titre about */
.about-title {
    font-family: "neue-haas-unica", sans-serif;
    font-size: 1.1rem; /* Taille du texte */
    font-weight: normal;
    text-transform: uppercase;
    margin-top: 1rem; /* Espacement au-dessus du texte */
    text-align: center; /* Centre le texte */
}


.about-text {
    font-family: "neue-haas-unica", sans-serif;
    text-align: center; /* Centre le texte horizontalement */
    font-size: 1rem; /* Ajuste la taille du texte si nécessaire */
    line-height: 1.3; /* Améliore la lisibilité */
    margin: 0 auto; /* Centre les marges */
    text-transform: uppercase;
    font-weight: normal;
    width: 50%;
}


/* Ligne fine au dessus du footer sur la page about */
.about-bottom-text {
    width: 60%;
    font-size: 0.79rem;
    text-transform: uppercase;
    padding-left: 10px;
    padding-right: 10px;
    color: dimgrey;
    text-align: center;
    margin: 0 auto; /* Centre les marges */
    margin-top: 5vh;
}

.friends-link {
    text-decoration: none;
    color: darkgrey;

}

.about-arrow {
        width: 17px;
        height: auto;
    }

.internship-animation {
    display: inline-block; /* Nécessaire pour animer correctement */
    color: black; /* Couleur initiale */
    transition: color 0.3s ease; /* Transition douce pour le survol */
}

/* Animation sur hover */
.internship-animation:hover {
    animation: colorChange 1s infinite; /* Lance l'animation en boucle */
}

/* Définition de l'animation */
@keyframes colorChange {
    0% {
        color: red;
    }
    25% {
        color: steelblue;
    }
    50% {
        color: seagreen;
    }
    75% {
        color: orange;
    }
    100% {
        color: lightpink;
    }
}

}

________________________________________





/*                                                               
   ad88                                                          
  d8"                              ,d                            
  88                               88                            
MM88MMM  ,adPPYba,    ,adPPYba,  MM88MMM  ,adPPYba,  8b,dPPYba,  
  88    a8"     "8a  a8"     "8a   88    a8P_____88  88P'   "Y8  
  88    8b       d8  8b       d8   88    8PP"""""""  88          
  88    "8a,   ,a8"  "8a,   ,a8"   88,   "8b,   ,aa  88          
  88     `"YbbdP"'    `"YbbdP"'    "Y888  `"Ybbd8"'  88 */



/* Assure que body et html occupent toute la hauteur */
html, body {
    height: 100%;
    margin: 0; /* Supprime les marges par défaut */
    display: flex;
    flex-direction: column; /* Permet de structurer en colonnes */
}

/* Footer fixé en bas */
footer {
    width: 100%;
    box-sizing: border-box; /* Assure un dimensionnement correct */
    position: fixed;
    font-size: 0.9rem; /* Taille de police cohérente */
    letter-spacing: 0.022rem;
    padding: 0;
    bottom: 0;
    left: 0;
    width: 100%; /* Prend toute la largeur */
    background-color: #fff; /* Couleur de fond (modifie selon ton design) */
    z-index: 0; /* Niveau bas pour ne pas passer au-dessus des contenus */
}



/* Conteneur principal du footer */
.footer-container {

    display: flex;
    justify-content: space-between; /* Écarte les sections gauche/droite */
    align-items: center; /* Centre verticalement */
    width: 100%;
    padding-left: 18px;
    padding-right: 18px;
    margin-top: 4px;
    max-width: 100vw;
    margin-bottom: 4px;
}

/* Liens dans le footer */
.link {
    
    text-decoration: none; /* Supprime le soulignement */
    color: black; /* Texte gris foncé */
    font-size: 0.9rem; /* Taille de texte cohérente */
    display: flex; /* Aligne l'image et le texte horizontalement */
    align-items: center; /* Centre l'image et le texte verticalement */
    gap: 0.5rem; /* Espacement entre l'image et le texte */
    margin: 0;
}

/* Flèches */
.arrow-left-to-right, .arrow-right-to-left {
    width: 20px; /* Taille fixe pour les flèches */
    height: auto; /* Conserve le ratio d'aspect */
    flex-shrink: 0; /* Empêche les flèches de rétrécir */
}



/*

                                                                                                                  
                                                                                     88                           
                                                                                     ""                           
                                                                                                                  
8b,dPPYba,   ,adPPYba,  ,adPPYba,  8b,dPPYba,    ,adPPYba,   8b,dPPYba,   ,adPPYba,  88  8b       d8   ,adPPYba,  
88P'   "Y8  a8P_____88  I8[    ""  88P'    "8a  a8"     "8a  88P'   `"8a  I8[    ""  88  `8b     d8'  a8P_____88  
88          8PP"""""""   `"Y8ba,   88       d8  8b       d8  88       88   `"Y8ba,   88   `8b   d8'   8PP"""""""  
88          "8b,   ,aa  aa    ]8I  88b,   ,a8"  "8a,   ,a8"  88       88  aa    ]8I  88    `8b,d8'    "8b,   ,aa  
88           `"Ybbd8"'  `"YbbdP"'  88`YbbdP"'    `"YbbdP"'   88       88  `"YbbdP"'  88      "8"       `"Ybbd8"'  
                                   88                                                                             
                                   88


/* ===========================
   RESPONSIVE — max-width: 768px
   =========================== */
@media screen and (max-width: 768px) {
@media screen and (max-width: 768px) {

  /* ---------- HEADER ---------- */
  header {
  padding: 10px 0px;  
  width: 100%;
  box-sizing: border-box;
}




  /* cacher le nom */
  .name {
    display: none !important;
  }

  /* bloc gauche : Work + Fonts */
  .left {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 32%;
    margin-left: 10px;
  }

  .header-titles {
    font-size: 0.8rem;
  }

  header .right {
  display: flex !important;
  gap: 12px;
  box-sizing: border-box;
  white-space: nowrap;
  width: 50vw;

}


  .lang-option span {
    display: none; /* cache "ENGLISH" et "FRENCH" */

  }

  .lang-option.english::after {
    content: "EN";
    font-size: 0.8rem;
  }

  .lang-option.french::after {
    content: "FR";
    font-size: 0.8rem;
  }

  .header-titles_about {
    font-size: 0.8rem;
  }

}

  /* ---------- PAGE PRINCIPALE (welcome / gif) ---------- */
  .welcome-text { width: 80%; font-size: 1rem; line-height: 1.4rem; margin: 6vh auto 2vh; }
  .gif-container { margin-top: 12vh; margin-bottom: 0; height: auto; }
  .centered-gif { max-width: 85%; height: auto; display:block; margin:0 auto; }
  .content { padding: 0; margin: 0; }


  /* ---------- ABOUT ---------- */
  .about-text { font-size: 1rem; width: 90%; margin: 0 auto 10px; text-align:center; }
  .about-bottom-text { width: 90%; margin: 6vh auto; font-size:0.79rem; text-align:center; }
  .about-photo { width: 30%; margin-top: 2vh; }
  .about-arrow { width: 17px; }




  /* ---------- FONTS ---------- */

  .font-tester-container {
    display: none;      /* cache le vrai contenu */
  }

  .font-mobile-warning {
  display: block;           /* caché sur desktop */
  text-align: center;  
  text-transform: uppercase;    
  font-family: "Neue Haas Unica", sans-serif;  /* même typo que le site */
  font-size: 1rem;
  font-weight: 400;
  color: #4fa459;             /* couleur du texte */
  margin: 14rem 8% 0 8%; /* 5rem depuis le haut, 2% sur les côtés */
  padding: 0;              /* plus de cadre */
  border: none;            /* enlève le cadre */
  background: none;        /* enlève le fond gris */
}

.mobile-warning-gif {
  display: block;
  margin: 1rem auto 0 auto; /* centré horizontalement et un petit espace au-dessus */
  max-width: 80%;            /* s’adapte à la largeur de l’écran */
  height: auto;              /* conserve les proportions */
}

  

  /* ===========================
   PAGE WORK — MOBILE (PRINCIPAL)
   =========================== */

/* 1) transformer la grille en flux vertical pour mobile */
.work-grid {
  display: block !important;
  width: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* 2) cacher la colonne gauche (texte fixe) et l'élément vide juste après */
.work-grid > .work-text,
.work-grid > div:nth-child(2) {
  display: none !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 3) work-projects : pleine largeur, flux vertical */
.work-projects {
  
  display: block !important;
  width: 100% !important;
  margin: 0;
  padding: 10px;
  box-sizing: border-box;
}


/* Titre projet */
.project h3 {
  
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0 0 3px 0;
}

/* Image projet */
.project-image {
  
  display: block;
  width: 100% !important;
  height: auto !important;
  margin: 0 0 0.4rem 0;
  object-fit: cover;
}

/* Ligne sous le titre contenant la flèche et le sous-titre */
.subtitle-line {
  display: flex;          /* alignement horizontal */
  align-items: center;    /* centrage vertical */
  height: 3vh;
  margin-bottom: 8px;
  
}

/* Colonne flèche */
.arrow-column {
  
  width: 6vw;
  display: flex;
  margin-top: 32px;
}

/* Colonne texte */
.text-column {
  flex: 1;                  /* prend tout l’espace restant */
  display: flex;
  justify-content: flex-end; /* texte aligné à droite */
  align-items: center;       /* centre verticalement */
}

/* Sous-titre à l'intérieur de la colonne de droite */
.project-subtitle {
  text-align: right;
  margin: 0;                /* supprime margin par défaut */
  line-height: 1;           /* assure que le texte est centré */
}

/* sécurité : forcer box-sizing pour éviter push d'espace */
.work-grid *, .work-projects *, .project * { 
  box-sizing: border-box; 
}

  /* ===========================
     VERSION DESKTOP EMBEDDED (cachée en mobile)
     on cache les blocs desktop qui ne doivent pas apparaître en mobile
     =========================== */

  .columns,
  .left1,
  .left2,
  .right {
    display: none !important;
  }

  .mobile-line,
  .mobile-line-reponsive {
    display: block;
    width: 100%;
  }

  /* colonnes responsive (titre / meta / desc) */
  .columns-responsive { display: flex; flex-direction: column; width:100%; padding:0; }

  .left1-responsive {
    display: block;
    width: 96%;
    font-size: 1.8rem;
    text-transform: uppercase;
    margin: 3vh 2% 8px;
    line-height: 1;
  }

  .left2-responsive,
  .left3-responsive {
    font-size: 0.9rem;
    padding: 6px 2%;
    border-bottom: 1px solid;
    width: calc(100% - 4%);
    box-sizing: border-box;
  }

  .right-responsive { display:block; padding: 0 2%; }
  .description-responsive { font-size: 0.9rem; line-height:1.2; padding-bottom:12px; }

  /* ---------- petites corrections diverses ---------- */
  .Projects_carousel { display:flex; flex-direction:column; gap:0.4rem; height:auto; overflow:hidden; align-items:center; }
  .Projects_carousel img, .Projects_carousel .video-wrapper { width:100%; height:auto; }
  .video-wrapper { width: 100%; max-width: 60vw; }

  /* ---------- nested small screens overrides (max 600px) ---------- */
  @media screen and (max-width: 600px) {
    /* réduit encore les fontes */
    .project h3, .project-title { font-size: 0.95rem; }
    .project-subtitle, .subtitle-line .text-column p { font-size: 0.82rem; }
    .description-text { font-size: 0.82rem; }
    .left1-responsive { font-size: 1.4rem; margin-top: 2.5vh; }
    /* footer tweaks */
    .footer-container { padding-left:9px; padding-right:9px; text-align:center; }
    .arrow-right-to-left, .arrow-left-to-right { display:none; }
    .link { font-size:0.8rem; }
  }

} /* end @media 768px */